<template>
  <scroll-view
    scroll-y
    class="recommend_box"
    @scrolltolower="handleScroll"
    v-if="fourList.length > 0"
  >
    <!-- 头 -->
    <view class="titleImage">
      <navigator
        class="imag_box"
        v-for="(item, index) in fourList"
        :key="id"
        :url="`../albumDetails/albumDetails?id=${item.id}`"
      >
        <image :src="item.thumb" mode="widthFix" />
      </navigator>
    </view>
    <!-- 月份模块 -->
    <view class="mathDayBox">
      <!-- 标题 -->
      <view class="title_Box">
        <view class="title_left">
          <text class="text1">{{ moments.DD }} /</text>{{ moments.MM }}月
          <text class="text2">{{ mathDayList.title }}</text>
        </view>
        <view class="title_right"> 更多 > </view>
      </view>
      <!-- 图片 -->
      <view class="mainImageBox">
        <view
          v-for="(item, index) in fourImageList"
          :key="index"
          class="imageBox"
        >
          <LinkGump :list="fourImageList" :index="index">
            <image
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
              mode="aspectFill"
            />
          </LinkGump>
        </view>
      </view>
    </view>
    <!-- 热门模块 -->
    <view class="hotBox">
      <view class="hotTitle">热门</view>
      <view class="hotMain">
        <view
          class="hotImageBox"
          v-for="(item, index) in hotImageList"
          :key="index"
        >
        <LinkGump :list="hotImageList" :index="index">
          <image :src="item.thumb" mode="widthFix" />
        </LinkGump>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from "moment";
import LinkGump from "../../../components/linkGump";
export default {
  data() {
    return {
      fourList: [],
      fourImageList: [],
      mathDayList: [],
      parmas: {
        limit: 30,
        order: "hot",
        skip: 0,
      },
      tiems: 0,
      moments: {
        MM: "",
        DD: "",
      },
      hotImageList: [],
      isMore: true,
    };
  },
  components: {
    LinkGump,
  },
  mounted() {
    this.getList();
    uni.setNavigationBarTitle({
      title: "首页",
    });
  },
  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.parmas,
      }).then((res) => {
        this.fourImageList = res.data.res.homepage[2].items;
        this.mathDayList = res.data.res.homepage[2];
        this.times = res.data.res.homepage[2].stime;
        this.moments.MM = moment(this.tiems).format("MM");
        this.moments.DD = moment(this.tiems).format("DD");
        this.hotImageList = [...this.hotImageList, ...res.data.res.vertical];
        this.fourList = res.data.res.homepage[1].items;
        if (res.data.res.vertical.length === 0) {
          this.isMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
      });
    },
    handleScroll() {
      if (this.isMore) {
        this.parmas.skip += this.parmas.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.recommend_box {
  height: calc(100vh - 46px);
  .titleImage {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .imag_box {
      width: 50%;
      border: 5rpx solid #fff;
    }
  }
}

//月份模块
.mathDayBox {
  //月份头
  .title_Box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 10rpx;
    font-weight: 600;
    .title_left {
      color: #d4237a;

      .text1 {
        font-size: 22px;
      }
      .text2 {
        font-size: 18px;
        color: #666666;
        margin-left: 10rpx;
      }
    }
  }
  //月份图片
  .mainImageBox {
    display: flex;
    flex-wrap: wrap;
    .imageBox {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}

//热门模块
.hotBox {
  .hotTitle {
    color: #666666;
    font-size: 18px;
    padding: 10rpx 10rpx;
    font-weight: 600;
    margin-left: 20rpx;
    margin-top: 20rpx;
    border-left: 10rpx solid #d4237a;
  }
  .hotMain {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10rpx;
    .hotImageBox {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
</style>
